<template>
  <view
    :style="option.style"
    :class="[option.type == 'textarea' || option.type == 'image' ? '' : 'dt-flex dt-flex-vertical-center']"
    style="padding: 10rpx 0; min-height: 88rpx; border-bottom: 1rpx #f5f5f5 solid"
    v-if="!option.isHide">
    <view class="title">
      <image
        v-if="option.isSub"
        style="width: 28rpx; height: 28rpx"
        src="https://static.tospurfang.com/bd/sub.png"
        mode="widthFix" />
      <image
        v-if="option.isSubChild"
        style="width: 28rpx; height: 28rpx; margin-left: 28rpx"
        src="https://static.tospurfang.com/bd/sub.png"
        mode="widthFix" />
      {{ option.title }}
      <text v-if="option.required" style="color: #f33c3c">*</text>
    </view>
    <view
      v-if="option.type == 'text'"
      class="val-text dt-flex-1 dt-flex dt-flex-vertical-center"
      :style="option.style">
      <image
        v-if="option.showImg"
        src="https://static.tospurfang.com/asset/warning.png"
        mode="scaleToFill"
        style="width: 32rpx; height: 32rpx" />
      <text :style="option.style">{{ info[option.key] }}</text>
    </view>

    <view v-if="option.type == 'input'" class="dt-flex-1">
      <input
        v-model="info[option.key]"
        :maxlength="option.max || 140"
        :type="option.input"
        :placeholder="option.placeholder || '请输入'"
        placeholder-class="placehoderClass"
        @blur="option.blur" />
    </view>
    <view v-if="option.type == 'search'" class="val-text dt-flex-vertical-center dt-flex-1">
      <view class="dt-flex-1" @click="option.onClick">
        <text v-if="info[option.key]">{{ info[option.key] }}</text>
        <text v-else class="select">{{ option.placeholder || '请选择' }}</text>
        <image
          style="width: 28rpx; height: 28rpx; vertical-align: middle"
          src="https://static.tospurfang.com/bd/right.png"
          mode="widthFix" />
      </view>
    </view>
    <view v-else-if="option.type == 'textarea'" class="val-text dt-flex-1" style="margin-top: 10rpx">
      <textarea
        v-model="info[option.key]"
        :maxlength="option.max"
        :placeholder="option.placeholder || '请输入'"
        disable-default-padding
        placeholder-class="placehoderClass"
        style="
          text-align: left;
          width: 630rpx;
          height: 140rpx;
          background: #f5f5f5;
          border-radius: 8rpx;
          padding: 20rpx;
          margin-bottom: 10rpx;
        "
        @blur="option.blur" />
    </view>

    <view v-else-if="option.type == 'image'" class="val-text dt-flex-1" style="margin: 10rpx 0">
      <view style="display: flex">
        <view v-if="option.tip" class="placehoderClass" style="text-align: left">{{ option.tip }}</view>
        <view style="flex: 1"></view>
        <view
          v-if="!option.max || option.max > (info[option.key]?.length || 0)"
          @click="onImageAdd"
          style="color: #2670f3; flex-shrink: 0; margin-left: 50rpx">
          上传
        </view>
      </view>
      <view style="margin-top: 10rpx; display: flex; flex-wrap: wrap">
        <view
          v-for="(itm, idx) in info[option.key]"
          :key="idx"
          style="
            width: 140rpx;
            height: 140rpx;
            background: #f5f5f5;
            border-radius: 8rpx;
            position: relative;
            margin: 10rpx;
          ">
          <image
            @click="onImagePreview(itm)"
            :src="itm[option.urlKey || 'url']"
            mode="aspectFill"
            style="width: 140rpx; height: 140rpx; border-radius: 8rpx" />
          <image
            @click="onImageDelect(idx)"
            src="https://static.tospurfang.com/asset/del.png"
            mode="scaleToFill"
            style="
              width: 40rpx;
              height: 40rpx;
              position: absolute;
              top: -10rpx;
              left: -10rpx;
              padding: 0 15rpx 15rpx 0;
            " />
        </view>
      </view>
    </view>

    <view class="dt-flex dt-flex-1" v-else-if="option.type == 'event'" @click="option.click">
      <view :class="['select', info[option.key] == null || info[option.key] == '' ? '' : 'selected']">
        {{
          info[option.key] == null || info[option.key] == ''
            ? option.placeholder || '请选择'
            : info[option.key]
        }}
        <image
          style="width: 28rpx; height: 28rpx; vertical-align: middle"
          src="https://static.tospurfang.com/bd/right.png"
          mode="widthFix" />
      </view>
    </view>

    <view class="dt-flex dt-flex-1" v-else-if="option.type == 'select'">
      <picker
        @change="changePicker"
        :value="isEmpty(option.key) ? '' : option.dropList.findIndex((item) => item.key == info[option.key])"
        :range="option.dropList"
        :range-key="'value'">
        <view :class="['select', isEmpty(option.key) ? '' : 'selected']">
          {{
            isEmpty(option.key)
              ? option.placeholder || '请选择'
              : option.dropList.filter((item) => item.key == info[option.key])[0]?.value
          }}
          <image
            style="width: 28rpx; height: 28rpx; vertical-align: middle"
            src="https://static.tospurfang.com/bd/right.png"
            mode="widthFix" />
        </view>
      </picker>
    </view>

    <view class="dt-flex dt-flex-1" v-else-if="option.type == 'multipleSelect'">
      <view class="form dt-flex-1">
        <view class="item dt-flex-vertical-center">
          <!-- 下拉框多选 -->
          <view
            :class="['select', info[option.showKey] == null || info[option.showKey] == '' ? '' : 'selected']"
            @tap="handleMultiple">
            {{
              info[option.showKey] == null || info[option.showKey] == ''
                ? option.placeholder || '请选择'
                : info[option.showKey]
            }}
            <image
              style="width: 28rpx; height: 28rpx; vertical-align: middle"
              src="https://static.tospurfang.com/bd/right.png"
              mode="widthFix" />
          </view>
        </view>
      </view>
      <multiple-picker
        title="请选择"
        :show="option.show"
        :defaultIndex="info[option.key]"
        :columns="option.dropList"
        @confirm="confirmMultiple"
        @cancel="closeMultiple"></multiple-picker>
    </view>
  </view>
</template>

<script setup>
  import fileMgr from '@/biz/file'
  import { ref, watch } from 'vue'
  import multiplePicker from './multiple-picker.vue'

  const props = defineProps({
    modelValue: Object,
    option: Object
  })
  const emits = defineEmits(['change'])

  const info = ref({})

  watch(
    () => props.modelValue,
    (n) => {
      if (n) info.value = n
    },
    { immediate: true }
  )

  function isEmpty(key) {
    return info.value[key] === null || info.value[key] === '' || info.value[key] === undefined
  }

  function checkRequired() {
    if (props.option.required && isEmpty(props.option.key)) {
      uni.showToast({ title: `${props.option.title}必填！`, icon: 'none' })
      return false
    }
    return true
  }

  function changePicker(e) {
    info.value[props.option.key] = props.option.dropList[e.detail.value].key
    if (props.option.onChange) {
      props.option.onChange(e)
    }
  }

  function handleMultiple() {
    props.option.show = true
  }

  function closeMultiple() {
    props.option.show = false
  }

  function confirmMultiple(e) {
    let temp = []
    let tempCode = []
    e.selected.forEach((item, index) => {
      temp.push(item.value)
      tempCode.push(item.key)
    })
    info.value[props.option.key] = tempCode.toString()
    info.value[props.option.showKey] = temp.toString()
    props.option.show = false
  }

  function onImageAdd() {
    let count = 9
    if (props.option.max) {
      count = props.option.max - (info.value[props.option.key]?.length || 0)
    }
    fileMgr.chooseImages({ count }).then(async (paths) => {
      if (!info.value[props.option.key]) info.value[props.option.key] = []
      let urls = []
      uni.showLoading({ title: '上传中' })
      for (let i = 0; i < paths.length; i++) {
        const path = paths[i]
        let res = await fileMgr.upload(path)
        let item = {}
        item[props.option.urlKey || 'url'] = res.imageURL
        item[props.option.nameKey || 'name'] = res.imageName.split('/').pop()
        urls.push(item)
      }
      uni.hideLoading()
      info.value[props.option.key] = [...info.value[props.option.key], ...urls]
    })
  }

  function onImageDelect(idx) {
    uni.showModal({
      title: '是否删除该照片？',
      success: (res) => {
        if (res.confirm) info.value[props.option.key].splice(idx, 1)
      }
    })
  }

  function onImagePreview(itm) {
    uni.previewImage({
      urls: [itm[props.option.urlKey || 'url']]
    })
  }

  defineExpose({ checkRequired })
</script>

<style lang="scss" scoped>
  .title {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #222222;
    line-height: 40rpx;
  }

  .val-text {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #222222;
    line-height: 40rpx;
    text-align: right;
  }
  ::v-deep .placehoderClass {
    color: #adadad;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    font-family: PingFangSC, PingFang SC;
    text-align: right;
  }

  .rule {
    font-size: 24rpx;
    color: #f33c3c;
    line-height: 24rpx;
    padding-left: 9rpx;
    border-left: 1rpx solid #d8d8d8;
  }
  picker,
  input {
    height: 40rpx;
    line-height: 40rpx;
    text-align: right;
    font-weight: 400;
    color: #222222;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    flex: 1;
  }

  .select {
    color: #adadad;
    text-align: right;
    font-weight: 400;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    flex: 1;
  }
  .selected {
    color: #222222;
  }
</style>
